<template>
  <div class="header_margin-top">
    <Header/>
    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel students">Students show</h2>
        <h1 class="pos-abs">学员秀</h1>
        <h3 class="pos-abs">每当看到自己的好身材，总能想起一直坚持不懈。练瑜伽的自己！</h3>
        <div class="catage clearfix pos-abs">您所有在位置：首页 > 学员秀 > 列表</div>
      </div>
      <ul class="students-list clearfix">
        <li class="clearfix pos-rel" v-for="(site, index) in newList" :class="{marNoR: !((index + 1) % 3)}"  :key="site.id" v-on:click="li_click(site.id)">
          <div class="img-con">
            <img :src="site.imgUrl" class="img">
          </div>
          <p class="tit text-wid">{{site.title}}</p>
        </li>
      </ul>
      <div class="clear hei20"></div>
      <div class="pagesize clearfix">
        <span class="pre"><<</span>
        <span class="pre"><</span>
        <span>1</span>
        <span>2</span>
        <span class="pre">></span>
        <span class="pre">>></span>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from "./Footer.vue";
import _http from "../httpService";

export default {
  name: "News",
  props: {
    msg: String
  },
  data() {
    return {
      newList: [
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        },
        {
          title: "产后垫上运动",
          imgUrl: require("../assets/images/img03.png")
        }
      ]
    };
  },
  components: {
    Header,
    Footer
  },
  mounted() {
    _http
      .get(
        "/content/selectListByEnterpriseIdAndCatalogCode?catalogCode=showcase"
      )
      .then(response => {
        this.newList = [];
        response.data.forEach(element => {
          this.newList.push({
            id: element.id,
            title: element.title,
            imgUrl: element.previewImage
          });
        });
      })
      .catch(error => console.log(error))
      .finally(() => (this.loading = false));
  },
  methods: {
    li_click: function(id) {
      console.log(id);
      this.$router.push({ path: "/detail/" + id });
    }
  }
};
</script>

<style>
body {
  background: #f4f4f4 !important
}
.header_margin-top {
  margin: 0px !important;
  padding-top: 120px !important;
}
.students-list li {
  float: left;
  width: 353px;
  height: 500px;
  padding: 0px;
  margin: 0px 70px 50px 0px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.students-list li .img-con {
  width: 100%;
  height: 440px;
  border: 1px solid #ddd;
  overflow: hidden;
}
/*.students-list li:nth-child(3),
.students-list li:nth-child(6),
.students-list li:nth-child(9),
.students-list li:nth-child(12) {
  margin-right: 0px;
}*/
.students-list li.marNoR{
  margin-right:0px;
}

.students-list li img {
  height: 100%;
  background: #fff;
  -webkit-transform: translate(-25%,0%);
  -moz-transform: translate(-25%,0%);
  -ms-transform: translate(-25%,0%);
  -o-transform: translate(-25%,0%);
  transform: translate(-25%,0%);
}
.students-list li img:hover {
  transition: 0.5s transform;
  -o-transition: 0.5s transform;
  -moz-transition: 0.5s transform;
  -webkit-transition: 0.5s transform;
  -ms-transition: 0.5s transform;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}
.students-list li .tit {
  margin-top: 10px;
  background: #f8ede5;
  padding: 0px 10px;
  color: #5f4d45;
  font: normal 14px/46px "Microsoft YaHei";
}
.pagesize {
  display: block;
  width: 100%;
  padding: 20px 0px;
  text-align: center;
}
.pagesize span {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 5px;
  text-align: center;
  font: normal 16px/35px "Arial";
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background: #f38656;
  color: #fff;
  cursor: pointer;
}
.pagesize span.pre {
  background: #544441;
}
.public-title h2.students:before {
  width: 340px;
}
</style>
